<template>
  <dv-border-box-7 id="board-second-right-charts">
    <div class="second-right-charts">保养记录</div>
    <hr />
    <div class="board-second-right-scroll-board">
      <dv-scroll-board :config="config" />
    </div>
  </dv-border-box-7>
</template>

<script>
import Axios from "axios";
import { fontSize } from "../index/scrollBoard.vue";

export default {
  name: "ScrollBoard",
  data() {
    return {
      config: {
        header: ["设备名称", "时间", "保养类", "保养内容"],
        data: [["指纹机", "2022/06/10", "一级保养", "擦拭"]],

        columnWidth: [
          fontSize(5),
          fontSize(20),
          fontSize(15),
          fontSize(15),
          fontSize(15),
        ],
        index: true,
        align: ["center"],
        rowNum: 7,
        headerBGC: "#1981f6",
        headerHeight: [fontSize(5)],
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",
      },
    };
  },
  methods: {
    UpdateData() {
      //const { randomExtend } = this;
      var _this = this;
      var data = "";
      var Array = [];
      //var url = this.$baseUrl + "";
      Axios.get("").then((response) => (data = response.data));
      for (var i in data) {
        Array.push(Object.values(data[i]));
      }

      _this.config = {
        header: ["设备名称", "时间", "保养类", "保养内容"],
        data: Array,
        index: true,
        columnWidth: [
          fontSize(5),
          fontSize(20),
          fontSize(15),
          fontSize(15),
          fontSize(15),
        ],
        index: true,
        align: ["center"],
        rowNum: 7,
        headerBGC: "#1981f6",
        headerHeight: [fontSize(5)],
        hoverPause: true,
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",
      };
    },
  },
  mounted() {
    // const { UpdateData } = this;
    // this.UpdateData();
    // setInterval(this.UpdateData, 1000);
  },
};
</script>

<style lang="less">
#board-second-right-charts {
  width: 32%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
  .second-right-charts {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
    background-color: #1981f6;
  }
  .board-second-right-scroll-board {
    width: 100%;
    height: 100%;
  }
}
</style>
